<template dataBoardAdmin>
  <div class="new-wapper">
    <div class="update-time-box df">
      <div class="update-time-box-text1 df">
        <a-avatar :size="24" shape="square" src="https://ll-oss-debug.oss-cn-beijing.aliyuncs.com/1654485915465.png" /> <span class="data-title">抖音运营看板</span>
        <span class="data-text">日期：</span><a-range-picker :allowClear="false" class="wid-240" :disabledDate="disabledEndDate" @change="handleSelectDate" v-model="selectDate" />
        <div class="quick-btn">
          <a-button type="default" @click="chooseDay(1)">昨天</a-button>
          <a-button type="default" @click="chooseDay(2)">近七天</a-button>
          <a-button type="default" @click="chooseDay(3)">近30天</a-button>
        </div>
      </div>
      <div class="update-time-box-text2">更新时间：{{ latestModifyTime || moment(new Date()).format('YYYY-MM-DD hh:mm:ss') }}</div>
    </div>
    <a-tabs default-active-key="1" :activeKey="firstKey" @change="callback">
      <a-tab-pane key="1" tab="产品">
        <!-- 产品数据 -->
        <a-spin class="new-statist-box" tip="加载中..." :spinning="isProductLoading">
          <!-- 筛选 -->
          <div class="new-box-filter df">
            <div class="new-box-filter-left df">
              <div class="margin-right-16">
                <span>大区：</span>
                <a-select
                  class="wid-160"
                  show-search
                  :allowClear="true"
                  placeholder="请选择大区"
                  @select="selectArea"
                  v-model="productSearch.configId"
                  @change="handleByQueryCondProduct"
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="(item, index) in allArea" :key="index + '-' + item.configId" :configName="item.name" :value="item.configId">{{ item.name }}</a-select-option>
                </a-select>
              </div>
              <div class="margin-right-16">
                <span>站点：</span>
                <a-select class="wid-160" show-search :allowClear="true" placeholder="请选择站点" v-model="productSearch.locationId" @change="handleByQueryCondProduct" :filter-option="filterOption">
                  <a-select-option v-for="(item, index) in allStation" :key="index + '-' + item.id" :value="item.id">{{ item.city }}</a-select-option>
                </a-select>
              </div>
              <div class="margin-right-16">
                <span>产品：</span>
                <a-input-search class="wid-160" type="text" placeholder="产品名称/ID" allowClear v-model="productSearch.proKeyword" @search="handleByQueryCondProduct" />
              </div>
            </div>
            <div class="new-box-filter-right flex-shrink-0">
              <a-button type="primary" @click="handleByQueryCondProduct" class="gray-btn">查询</a-button>
              <a-button @click="resetSearch('product')" class="border-radious-2">重置</a-button>
            </div>
          </div>
          <!-- echarts-tabs -->
          <a-tabs type="card" class="second-tabs" @change="(key) => secondCallBack(key, 1)">
            <a-tab-pane key="1" tab="销售数量" class="df">
              <!-- 产品销量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct1" class="line-echarts"></div>
                <!-- <a-empty v-else class="line-echarts-box flex-shrink-0 empty-box" /> -->
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime1 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct1', 1, optionTitles.productAmount.area)">按日</div>
                  <div :class="{ 'active-time': !isActiveSwitchTime1 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct1', 1, optionTitles.productAmount.area)">按周</div>
                </div>
              </div>

              <!-- 核销/退款量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse1" class="line-echarts"></div>
                <div class="switch-time df">
                  <div
                    :class="{ 'active-time': isActiveSwitchType1 }"
                    @click="switchTypeAction(1, 'num', true, 'areaLineUse1', 1, optionTitles.productAmount.line, optionTitles.productAmount.subTitle)"
                  >
                    按数量
                  </div>
                  <div
                    :class="{ 'active-time': !isActiveSwitchType1 }"
                    @click="switchTypeAction(1, 'bigClass', false, 'areaLineUse1', 1, optionTitles.productAmount.line, optionTitles.productAmount.subTitle)"
                  >
                    按大类
                  </div>
                </div>
              </div>
              <data-static :dataObj="productDataStatic"></data-static>
            </a-tab-pane>
            <a-tab-pane key="2" tab="销售金额" class="df">
              <!-- 产品销量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct2" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime2 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct2', 2, optionTitles.productMoney.area)">按日</div>
                  <div :class="{ 'active-time': !isActiveSwitchTime2 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct2', 2, optionTitles.productMoney.area)">按周</div>
                </div>
              </div>
              <!-- 核销/退款量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse2" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchType2 }" @click="switchTypeAction(1, 'num', true, 'areaLineUse2', 2, optionTitles.productMoney.line, optionTitles.productMoney.subTitle)">
                    按数量
                  </div>
                  <div
                    :class="{ 'active-time': !isActiveSwitchType2 }"
                    @click="switchTypeAction(1, 'bigClass', false, 'areaLineUse2', 2, optionTitles.productMoney.line, optionTitles.productMoney.subTitle)"
                  >
                    按大类
                  </div>
                </div>
              </div>
              <data-static :dataObj="productDataStatic"></data-static>
            </a-tab-pane>
            <a-tab-pane key="3" tab="产品上架" class="df">
              <!-- 产品销量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct3" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime3 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct3', 3, optionTitles.productUpDown.area)">按日</div>
                  <div :class="{ 'active-time': !isActiveSwitchTime3 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct3', 3, optionTitles.productUpDown.area)">按周</div>
                </div>
              </div>
              <!-- 核销/退款量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse3" class="line-echarts"></div>
                <div class="switch-time df">
                  <div
                    :class="{ 'active-time': isActiveSwitchType3 }"
                    @click="switchTypeAction(1, 'num', true, 'areaLineUse3', 3, optionTitles.productUpDown.line, optionTitles.productUpDown.subTitle)"
                  >
                    按数量
                  </div>
                  <div
                    :class="{ 'active-time': !isActiveSwitchType3 }"
                    @click="switchTypeAction(1, 'bigClass', false, 'areaLineUse3', 3, optionTitles.productUpDown.line, optionTitles.productUpDown.subTitle)"
                  >
                    按大类
                  </div>
                </div>
              </div>
              <data-static :dataObj="productDataStatic"></data-static>
            </a-tab-pane>
          </a-tabs>
          <!-- tables -->
          <div class="board-table-box new-box">
            <div class="table-box-title">产品销售明细</div>
            <a-table :columns="productTableColumns" :pagination="false" :data-source="productDataList" :scroll="{ x: 900, y: 380 }" :loading="isProListLoading">
              <!-- 产品信息 -->
              <template slot="productId" slot-scope="text, record">
                <p>产品ID：{{ record.productId || '空' }}</p>
                <p>产品名称：{{ record.productName || '空' }}</p>
              </template>
              <!-- 站点信息 -->
              <template slot="locationName" slot-scope="text, record">
                <p>站点：{{ record.locationName || '空' }}</p>
                <p>大区：{{ record.configName || '空' }}</p>
              </template>
              <template slot="action" slot-scope="text, record">
                <a-button type="link" style="padding:0;" size="small" @click="detailProductAction(record)">详情</a-button>
              </template>
            </a-table>
            <div class="paging-container new-paging-container">
              <a-pagination
                :pageSize="productPagination.pageSize"
                v-model="productPagination.pageIndex"
                :total="productPagination.total"
                showQuickJumper
                showLessItems
                :showTotal="(total) => `共 ${total} 条`"
                style="margin: 10px auto;"
                @change="
                  (value) => {
                    return handlePageChange(value, 'product')
                  }
                "
              />
            </div>
          </div>
        </a-spin>
      </a-tab-pane>
      <a-tab-pane key="2" tab="主播">
        <!-- 主播数据 -->
        <a-spin class="new-statist-box" tip="加载中..." :spinning="isHostLoading">
          <!-- 筛选 -->
          <div class="new-box-filter df">
            <div class="new-box-filter-left df">
              <div class="margin-right-16">
                <span>主播：</span>
                <a-input-search class="wid-240" type="text" placeholder="请输入主播名称/主播ID/视频ID" allowClear v-model="hostSearch.agentKeyword" @search="handleByQueryCondHost" />
              </div>
            </div>
            <div class="new-box-filter-right flex-shrink-0">
              <a-button type="primary" @click="handleByQueryCondHost" class="gray-btn">查询</a-button>
              <a-button @click="resetSearch('host')" class="border-radious-2">重置</a-button>
            </div>
          </div>
          <!-- echarts-tabs -->
          <a-tabs type="card" class="second-tabs" @change="(key) => secondCallBack(key, 2)">
            <a-tab-pane key="1" tab="带货数量" class="df">
              <!-- 带货销量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct4" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime4 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct4', 4, optionTitles.hostAmount.area)">
                    按日
                  </div>
                  <div :class="{ 'active-time': !isActiveSwitchTime4 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct4', 4, optionTitles.hostAmount.area)">按周</div>
                </div>
              </div>
              <!-- 带货核销/退款量 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse4" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchType4 }" @click="switchTypeAction(1, 'num', true, 'areaLineUse4', 4, optionTitles.hostAmount.line, optionTitles.hostAmount.subTitle)">
                    按数量
                  </div>
                  <div
                    :class="{ 'active-time': !isActiveSwitchType4 }"
                    @click="switchTypeAction(1, 'bigClass', false, 'areaLineUse4', 4, optionTitles.hostAmount.line, optionTitles.hostAmount.subTitle)"
                  >
                    按大类
                  </div>
                </div>
              </div>
              <!-- 数据概况 -->
              <data-static :dataObj="hostDataStatic"></data-static>
            </a-tab-pane>
            <a-tab-pane key="2" tab="带货金额" class="df">
              <!-- 带货GMV -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct5" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime5 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct5', 5, optionTitles.hostMoney.area)">按日</div>
                  <div :class="{ 'active-time': !isActiveSwitchTime5 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct5', 5, optionTitles.hostMoney.area)">按周</div>
                </div>
              </div>
              <!-- 核销/退款金额 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse5" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchType5 }" @click="switchTypeAction(1, 'num', true, 'areaLineUse5', 5, optionTitles.hostMoney.line, optionTitles.hostMoney.subTitle)">
                    按数量
                  </div>
                  <div
                    :class="{ 'active-time': !isActiveSwitchType5 }"
                    @click="switchTypeAction(1, 'bigClass', false, 'areaLineUse5', 5, optionTitles.hostMoney.line, optionTitles.hostMoney.subTitle)"
                  >
                    按大类
                  </div>
                </div>
              </div>
              <!-- 数据概况 -->
              <data-static :dataObj="hostDataStatic"></data-static>
            </a-tab-pane>
            <a-tab-pane key="3" tab="达人营主播合作" class="df">
              <!-- 达人营主播等级占比 -->
              <div class="cicle-echarts flex-shrink-0" id="cicleEcharts1"></div>
              <!-- 达人营主播合作频率 -->
              <div class="cicle-echarts flex-shrink-0" id="cicleEcharts2"></div>
              <!-- 达人营发片主播占比 -->
              <div class="cicle-echarts flex-shrink-0" id="cicleEcharts3"></div>
              <data-static :dataObj="hostDataStatic" :allWidth="true"></data-static>
            </a-tab-pane>
            <a-tab-pane key="4" tab="主播发片" class="df">
              <!-- 有效发片数 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct6" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime6 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct6', 6, optionTitles.hostActionNum.area)">按日</div>
                  <div :class="{ 'active-time': !isActiveSwitchTime6 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct6', 6, optionTitles.hostActionNum.area)">按周</div>
                </div>
              </div>
              <!-- 有效发片占比 -->
              <div class="cicle-echarts flex-shrink-0" id="cicleEcharts4"></div>
              <!--有效发片类别 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse6" class="line-echarts"></div>
                <!-- <div class="switch-time df" style="display:none;">
                  <div :class="{ 'active-time': isActiveSwitchType6 }" @click="switchTypeAction(1, 'num', true, 'areaLineUse6', 6)">按数量</div>
                  <div :class="{ 'active-time': !isActiveSwitchType6 }" @click="switchTypeAction(1, 'bigClass', false, 'areaLineUse6', 6)">按大类</div>
                </div> -->
              </div>
              <!-- 数据概况 -->
              <data-static :dataObj="hostDataStatic"></data-static>
            </a-tab-pane>
          </a-tabs>
          <!-- tables -->
          <div class="board-table-box new-box">
            <div class="table-box-title">主播带货明细</div>
            <a-table :columns="hostTableColumns" :pagination="false" :data-source="hostDataList" :scroll="{ x: 900, y: 380 }" :loading="isHostListLoading">
              <!-- 主播信息 -->
              <template slot="agentId" slot-scope="text, record">
                <!-- 素人便是空，故不显示 -->
                <div v-if="record.agentName !== '' && record.agentId !== ''">
                  <p>主播名：{{ record.agentName || '空' }}</p>
                  <p>主播ID：{{ record.agentId || '空' }}</p>
                  <p>账户类型：{{ record.accountType || '空' }}</p>
                </div>
                <span v-else>视频ID：{{ record.videoId || '空' }}</span>
              </template>
              <template slot="action" slot-scope="text, record">
                <a-button type="link" size="small" @click="detailHostAction(record)">详情</a-button>
              </template>
            </a-table>
            <div class="paging-container new-paging-container">
              <a-pagination
                :pageSize="hostPagination.pageSize"
                v-model="hostPagination.pageIndex"
                :total="hostPagination.total"
                showQuickJumper
                showLessItems
                :showTotal="(total) => `共 ${total} 条`"
                style="margin: 10px auto;"
                @change="
                  (value) => {
                    return handlePageChange(value, 'host')
                  }
                "
              />
            </div>
          </div>
        </a-spin>
      </a-tab-pane>
      <a-tab-pane key="3" tab="商家">
        <!-- 商家数据 -->
        <a-spin class="new-statist-box" tip="加载中..." :spinning="isShopsLoading">
          <!-- 筛选 -->
          <div class="new-box-filter df">
            <div class="new-box-filter-left df">
              <div class="margin-right-16">
                <span>大区：</span>
                <a-select
                  class="wid-160"
                  show-search
                  @select="selectArea"
                  :allowClear="true"
                  placeholder="请选择大区"
                  v-model="shopsSearch.configId"
                  @change="handleByQueryCondShop"
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="(item, index) in allArea" :configName="item.name" :key="index + '-' + item.configId" :value="item.configId">{{ item.name }}</a-select-option>
                </a-select>
              </div>
              <div class="margin-right-16">
                <span>站点：</span>
                <a-select class="wid-160" show-search :allowClear="true" placeholder="请选择站点" v-model="shopsSearch.locationId" @change="handleByQueryCondShop" :filter-option="filterOption">
                  <a-select-option v-for="(item, index) in allStation" :key="index + '-' + item.id" :value="item.id">{{ item.city }}</a-select-option>
                </a-select>
              </div>
              <div class="margin-right-16">
                <span>商家：</span>
                <a-input-search class="wid-160" type="text" placeholder="请输入商家名称" allowClear v-model="shopsSearch.merKeyword" @search="handleByQueryCondShop" />
              </div>
            </div>
            <div class="new-box-filter-right flex-shrink-0">
              <a-button type="primary" @click="handleByQueryCondShop" class="gray-btn">查询</a-button>
              <a-button @click="resetSearch('shops')" class="border-radious-2">重置</a-button>
            </div>
          </div>
          <div class="second-tabs no-tabs">
            <div class="df">
              <!-- 上线商家统计 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineProduct7" class="line-echarts"></div>
                <div class="switch-time df">
                  <div :class="{ 'active-time': isActiveSwitchTime7 }" @click="switchTypeAction(0, 'day', true, 'areaLineProduct7', 7, optionTitles.shopsNum.area)">按日</div>
                  <div :class="{ 'active-time': !isActiveSwitchTime7 }" @click="switchTypeAction(0, 'week', false, 'areaLineProduct7', 7, optionTitles.shopsNum.area)">按周</div>
                </div>
              </div>
              <!-- 商家占比 -->
              <div class="cicle-echarts flex-shrink-0 shop-merchants">
                <div class="shop-merchants-title">商家占比</div>
                <div class="shop-merchants-cicle">
                  <div class="cicle-remind-text" v-if="cicleObj && Object.keys(cicleObj).length > 0">
                    <p class="type-text">{{ cicleObj.cicleTitle }}</p>
                    <p class="type-num">数量{{ cicleObj.cicleNum }}</p>
                  </div>
                  <div
                    :class="{ 'cicle-big': item.name === '上线商户', 'cicle-middle': item.name === '有效发片商户', 'cicle-small': item.name === '已探店商户' }"
                    v-for="item in shopsMerchantArr"
                    :key="item.name"
                    @mouseenter="enterCicle(item.name, item.value)"
                  ></div>
                  <!-- @mouseleave="leaveCicle" -->
                  <!-- <div class="cicle-big" @mouseenter="enterCicle('上线商品', 4118)" @mouseleave="leaveCicle"></div>
                  <div class="cicle-middle" @mouseenter="enterCicle('有效发片商户数', 418)" @mouseleave="leaveCicle"></div>
                  <div class="cicle-small" @mouseenter="enterCicle('已探店商户数', 41)" @mouseleave="leaveCicle"></div> -->
                  <div class="cicle-reminds df">
                    <div class="cicle-reminds-item"><span class="dot dot1"></span>上线商户数</div>
                    <div class="cicle-reminds-item"><span class="dot dot2"></span>有效发片商户数</div>
                    <div class="cicle-reminds-item"><span class="dot dot3"></span>已探店商户数</div>
                  </div>
                </div>
              </div>
              <!-- 商家类型 -->
              <div class="line-echarts-box flex-shrink-0">
                <div id="areaLineUse7" class="line-echarts"></div>
              </div>
              <data-static :type="1" :dataObj="shopsDataStatic"></data-static>
            </div>
          </div>
          <!-- tables -->
          <div class="board-table-box new-box">
            <div class="table-box-title">商家销售明细</div>
            <a-table :columns="shopsTableColumns" :pagination="false" :data-source="shopsDataList" :scroll="{ x: 900, y: 380 }" :loading="isShopsListLoading">
              <!-- 商家信息 -->
              <template slot="businessName" slot-scope="text, record">
                <p>名称：{{ record.businessName || '空' }}</p>
                <p>类型：{{ record.categoryidLevel1Name || '空' }}</p>
              </template>
              <!-- 商家站点区域 -->
              <template slot="configName" slot-scope="text, record">
                <p>站点：{{ record.locationName || '空' }}</p>
                <p>大区：{{ record.configName || '空' }}</p>
              </template>
              <template slot="action" slot-scope="text, record">
                <a-button type="link" size="small" style="padding:0;" @click="detailShopsAction(record)">详情</a-button>
              </template>
            </a-table>
            <div class="paging-container new-paging-container">
              <a-pagination
                :pageSize="shopsPagination.pageSize"
                v-model="shopsPagination.pageIndex"
                :total="shopsPagination.total"
                showQuickJumper
                showLessItems
                :showTotal="(total) => `共 ${total} 条`"
                style="margin: 10px auto;"
                @change="
                  (value) => {
                    return handlePageChange(value, 'shops')
                  }
                "
              />
            </div>
          </div>
        </a-spin>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { getCommonApiSearch } from '@/service'
import {
  areaAllListUrl,
  productSoldStaticNumUrl,
  productSoldListUrl,
  productSoldStaticMoneyUrl,
  productSoldStaticUpUrl,
  hostListUrl,
  hostActionNumStaticUrl,
  hostActionMoneyStaticUrl,
  hostCooperStaticUrl,
  hostActionVideoStaticUrl,
  shopsStaticUrl,
  shopsSaleListUrl,
  locationArealUrl
} from '@/service/djService'
import dataStatic from './component/dataStatic'
import moment from 'moment'
import debounce from 'lodash/debounce'
import { douJiaColumn } from './column'
import '@/assets/style/newStyle.scss'
import { options } from './optionConfig'
export default {
  name: 'dataBoardAdmin',
  data() {
    // 节流
    this.getAllStation = debounce(this.getAllStation, 800)
    this.getAllAreaFun = debounce(this.getAllAreaFun, 800)
    return {
      isProductLoading: false,
      isHostLoading: false,
      isShopsLoading: false,
      isProListLoading: false,
      isHostListLoading: false,
      isShopsListLoading: false,
      latestModifyTime: '',
      allStation: [],
      allArea: [],
      selectDate: [],
      // 产品维度
      productSearch: {
        configId: '', // 大区id
        locationId: '', // 站点id
        proKeyword: '' // 产品名称或ID
      },
      productPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // table column
      productTableColumns: douJiaColumn.dataBoardProduct,
      hostTableColumns: douJiaColumn.dataBoardHost,
      shopsTableColumns: douJiaColumn.dataBoardShop,
      productDataList: [],
      hostDataList: [],
      shopsDataList: [],
      productDataStatic: [],
      commonArray1: [],
      commonArray2: [],
      hostAcitonVideoArr: [],
      hostDataStatic: [],
      shopsDataStatic: [],
      shopsMerchantArr: [],
      // 主播维度
      hostSearch: {
        agentKeyword: ''
      },
      hostPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // 商家维度
      shopsSearch: {
        configId: '', // 大区id
        locationId: '', // 站点id
        merKeyword: ''
      },
      shopsPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      timeIndex: [1, 2, 3, 4, 5, 6, 7],
      typeIndex: [1, 2, 3, 4, 5, 6],
      bigWidth: false,
      // secondKeyPro: '1',
      // secondKeyHost: '1',
      // 是否选中在按周按日选择上
      // isActiveSwitchTime1: true,
      // isActiveSwitchTime2: true,
      // isActiveSwitchTime3: true,
      // isActiveSwitchTime4: true,
      // isActiveSwitchTime5: true,
      // isActiveSwitchTime6: true,
      // isActiveSwitchTime7: true,
      // 是否选中在按数量按大类选择上
      // isActiveSwitchType1: true,
      // isActiveSwitchType2: true,
      // isActiveSwitchType3: true,
      // isActiveSwitchType4: true,
      // isActiveSwitchType5: true,
      // isActiveSwitchType6: true,
      cicleObj: {},
      todayMonment: moment(new Date() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD'),
      sevenDay: [],
      firstKey: '1',
      secondKeyPro: '1',
      secondKeyHost: '1',
      secondKeyType: 1,
      optionTitles: {
        productAmount: { area: '产品销量', line: '核销/退款量', subTitle: '单位：个' },
        productMoney: { area: '产品GMV', line: '核销/退款金额', subTitle: '单位：元' },
        productUpDown: { area: '上架抖音套餐', line: '上架/下架量', subTitle: '单位：个' },
        hostAmount: { area: '带货销量', line: '带货核销/退款量', subTitle: '单位：个' },
        hostMoney: { area: '带货GMV', line: '核销/退款金额', subTitle: '单位：元' },
        hostActionNum: { area: '有效发片数', line: '有效发片类别', subTitle: '单位：个' },
        shopsNum: { area: '上线商家统计', line: '商家类型', subTitle: '单位：个' }
      }
    }
  },

  components: {
    dataStatic
  },

  computed: {},

  methods: {
    moment,
    chooseDay(type = '') {
      let chooseDays = []
      const { getDay } = this
      switch (type) {
        case 1:
          chooseDays = [getDay(-1), getDay(-1)]
          break
        case 2:
          chooseDays = [getDay(-6), getDay(0)] || []
          break
        case 3:
          chooseDays = [getDay(-29), getDay(0)] || []
          break
        default:
          chooseDays = []
          break
      }
      this.selectDate = chooseDays
      this.dateChange()
    },
    getDay(day) {
      var today = new Date()
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth(month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
    setSelectDate(getDate = [], routerDate = []) {
      const { selectDate, getDay } = this
      this.sevenDay = [getDay(-6), getDay(0)] || []
      if (selectDate.length === 0 && getDate.length === 0 && routerDate.length === 0) {
        this.selectDate = this.sevenDay
      } else if (getDate.length > 0) {
        this.selectDate = [moment(getDate[0]).format('YYYY-MM-DD'), moment(getDate[1]).format('YYYY-MM-DD')]
      } else if (routerDate.length > 0) {
        this.selectDate = [routerDate[0], routerDate[1]]
      }
    },
    // 时间选择器只能到最大日期
    disabledEndDate(endValue) {
      const startValue = new Date()
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() <= endValue.valueOf()
    },
    // 获取大区
    async getAllAreaFun() {
      await areaAllListUrl()
        .then((res = []) => {
          this.allArea = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 顶部时间选择
    handleSelectDate() {
      const { selectDate = [] } = this
      let nowSelectDate = selectDate
      let days = moment(moment(selectDate[0])).diff(moment(moment(selectDate[1])), 'days') || 0
      if (days && Math.abs(days) > 60) {
        this.$messageSend.error('请重新选择，最多查询60天')
        this.setSelectDate(nowSelectDate)
        return
      }
      this.dateChange()
    },
    dateChange() {
      const { firstKey = '1', secondKeyPro = '1', secondKeyHost = '1', switchProductTabs, switchHostTabs, initShops } = this
      if (firstKey === '1') {
        switchProductTabs(secondKeyPro)
      } else if (firstKey === '2') {
        switchHostTabs(secondKeyHost)
      } else if (firstKey === '3') {
        initShops()
      }
    },
    switchProductTabs(keys = '1') {
      const { optionTitles = {} } = this
      const { productMoney = {}, productUpDown = {} } = optionTitles
      switch (keys) {
        case '1':
          this.initProduct()
          break
        case '2':
          this.initProduct(productSoldStaticMoneyUrl, 'areaLineProduct2', 'areaLineUse2', productMoney.area, productMoney.line, productMoney.subTitle, true)
          break
        case '3':
          this.initProduct(productSoldStaticUpUrl, 'areaLineProduct3', 'areaLineUse3', productUpDown.area, productUpDown.line, productUpDown.subTitle)
          break
      }
      this['isActiveSwitchTime' + keys] = true
      this['isActiveSwitchType' + keys] = true
    },
    switchHostTabs(keys = '1') {
      console.log(this.secondKeyHost)
      const { optionTitles = {} } = this
      const { hostMoney = {}, hostActionNum = {} } = optionTitles
      switch (keys) {
        case '1':
          this.initHost()
          break
        case '2':
          this.initHost(hostActionMoneyStaticUrl, 'areaLineProduct5', 'areaLineUse5', hostMoney.area, hostMoney.line, hostMoney.subTitle, true)
          break
        case '3':
          this.cicleEchartsHostCooper()
          this.getHostList()
          break
        case '4':
          this.initHost(hostActionVideoStaticUrl, 'areaLineProduct6', 'areaLineUse6', hostActionNum.area, hostActionNum.line, hostActionNum.subTitle)
          break
      }
      let countKeys = keys === '1' || keys === '2' ? Number(keys) + 3 : keys === '4' ? Number(keys) + 2 : 0
      this['isActiveSwitchTime' + countKeys] = true
      this['isActiveSwitchType' + countKeys] = true
    },
    // tab切换
    callback(key) {
      this.firstKey = key
      this.allStation = []
      this.$nextTick(() => {
        if (key === '1') {
          this.productSearch.locationId = ''
          this.productSearch.configId = ''
          this.switchProductTabs(this.secondKeyPro)
        } else if (key === '2') {
          this.switchHostTabs(this.secondKeyHost)
        } else if (key === '3') {
          this.shopsSearch.locationId = ''
          this.shopsSearch.configId = ''
          this.initShops()
        }
      })
    },
    // type 1,产品；2，主播；3，商家（无）
    secondCallBack(key, type = 1) {
      console.log(key, type)
      if (type === 1) {
        this.secondKeyPro = key
      } else if (type === 2) {
        this.secondKeyHost = key
      }
      // this.secondKey = key
      this.secondKeyType = type
      const { getProductStatic, getHostStatic, cicleEchartsHostCooper, optionTitles = {} } = this
      const { productMoney = {}, productUpDown = {}, hostMoney = {}, hostActionNum = {} } = optionTitles
      if (type === 1) {
        this.$nextTick(() => {
          this.isProductLoading = true
          if (key === '1') {
            getProductStatic().finally(() => (this.isProductLoading = false))
          } else if (key === '2') {
            getProductStatic(productSoldStaticMoneyUrl, 'areaLineProduct2', 'areaLineUse2', productMoney.area, productMoney.line, productMoney.subTitle, true).finally(
              () => (this.isProductLoading = false)
            )
          } else if (key === '3') {
            getProductStatic(productSoldStaticUpUrl, 'areaLineProduct3', 'areaLineUse3', productUpDown.area, productUpDown.line, productUpDown.subTitle).finally(() => (this.isProductLoading = false))
          }
          this['isActiveSwitchTime' + key] = true
          this['isActiveSwitchType' + key] = true
        })
      } else if (type === 2) {
        this.$nextTick(() => {
          this.isHostLoading = true
          if (key === '1') {
            getHostStatic().finally(() => (this.isHostLoading = false))
          } else if (key === '2') {
            getHostStatic(hostActionMoneyStaticUrl, 'areaLineProduct5', 'areaLineUse5', hostMoney.area, hostMoney.line, hostMoney.subTitle, true).finally(() => (this.isHostLoading = false))
          } else if (key === '3') {
            cicleEchartsHostCooper()
          } else if (key === '4') {
            getHostStatic(hostActionVideoStaticUrl, 'areaLineProduct6', 'areaLineUse6', hostActionNum.area, hostActionNum.line, hostActionNum.subTitle).finally(() => (this.isHostLoading = false))
          }
          let countKeys = key === '1' || key === '2' ? Number(key) + 3 : key === '4' ? Number(key) + 2 : 0
          this['isActiveSwitchTime' + countKeys] = true
          this['isActiveSwitchType' + countKeys] = true
        })
      }
    },
    /**
     * 通过条件查询-产品维度
     * @returns {void}
     */
    handleByQueryCondProduct() {
      this.productPagination.pageIndex = 1
      // this.setPath(this.getParams())
      this.switchProductTabs(this.secondKeyPro)
    },
    handleByQueryCondHost() {
      this.hostPagination.pageIndex = 1
      // this.setPath(this.getParams())
      this.switchHostTabs(this.secondKeyHost)
    },
    handleByQueryCondShop() {
      this.shopsPagination.pageIndex = 1
      // this.setPath(this.getParams())
      this.initShops()
    },
    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num, type) {
      console.log(num, type)
      const { getProductList, getHostList, getShopsList } = this
      // this.setPath(this.getParams())
      if (type === 'product') {
        this.productPagination.pageIndex = num
        getProductList()
      } else if (type === 'host') {
        this.hostPagination.pageIndex = num
        getHostList()
      } else if (type === 'shops') {
        this.shopsPagination.pageIndex = num
        getShopsList()
      }
    },
    // 获取站点列表
    getAllStation(e) {
      getCommonApiSearch({ keywords: e }).then((res) => {
        this.allStation = res
      })
    },
    // 重置
    resetSearch(type = '') {
      this[type + 'Pagination'].pageIndex = 1
      this.allStation = []
      if (type === 'product') {
        this.productSearch = {
          configId: '', // 大区id
          locationId: '', // 站点id
          proKeyword: '' // 产品名称或ID
        }
        this.switchProductTabs(this.secondKeyPro)
      } else if (type === 'host') {
        this.hostSearch = { agentKeyword: '' }
        this.switchHostTabs(this.secondKeyHost)
      } else if (type === 'shops') {
        this.shopsSearch = {
          configId: '', // 大区id
          locationId: '', // 站点id
          merKeyword: ''
        }
        this.initShops()
      }
    },
    // 拿参数-产品维度 type 0 有分页 ，1 无分页
    getParamsProduct(type = 0) {
      const { configId, locationId, proKeyword } = this.productSearch
      const { pageIndex, pageSize } = type === 0 ? this.productPagination : {}
      const { selectDate = [], getDay } = this
      return {
        pageIndex,
        pageSize,
        configId,
        locationId,
        proKeyword,
        startDate: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD') : getDay(-6) || '',
        endDate: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD') : getDay(0) || ''
      }
    },
    // 产品维度-list
    getProductList() {
      return new Promise((resolve, reject) => {
        this.isProListLoading = true
        productSoldListUrl(this.getParamsProduct(0)).then((res = {}) => {
          // 核销量，核销流水，订单流水，退款量，退款流水，实际销量
          const { completeCount = 0, completeWater = 0, list = [], orderWater = 0, refundCount = 0, refundWater = 0, saleCount = 0, rowCount = 0, latestTime = '' } = res
          this.productDataList = list
          this.productPagination.total = rowCount
          this.latestModifyTime = latestTime
          this.productDataStatic = [
            { name: '抖音实际销量', value: saleCount, isMoney: false },
            { name: '抖音核销量', value: completeCount, isMoney: false },
            { name: '抖音退款量', value: refundCount, isMoney: false },
            { name: '订单流水', value: orderWater, isMoney: true },
            { name: '核销流水', value: completeWater, isMoney: true },
            { name: '退款流水', value: refundWater, isMoney: true }
          ]
          this.isProListLoading = false
          resolve()
        })
      })
    },
    // 产品维度-图表
    getProductStatic(
      actionUrl = productSoldStaticNumUrl,
      postIdBox1 = 'areaLineProduct1',
      postIdBox2 = 'areaLineUse1',
      optionTitle1 = '产品销量',
      optionTitle2 = '核销/退款量',
      subTitle = '单位：个',
      isMoney = false
    ) {
      return new Promise((resolve, reject) => {
        actionUrl(this.getParamsProduct(1)).then((res = {}) => {
          const {
            byCategoryData = { xaxisData: [], yaxisData: [] }, // 按类别统计数据
            byDayData = { xaxisData: [], yaxisData: [] }, // 按天统计数据
            byQuantityOrAmountData = { xaxisData: [], yaxisData: [] }, // 按(数量/金额)统计数据
            byWeekData = { xaxisData: [], yaxisData: [] } // 按周统计数据
          } = res
          if (isMoney) {
            this.commonArray1 = [
              { xaxisData: byDayData.xaxisData || [], yaxisData: this.initMoneyArr(byDayData.yaxisData) || [] },
              { xaxisData: byWeekData.xaxisData || [], yaxisData: this.initMoneyArr(byWeekData.yaxisData) || [] }
            ]
            this.commonArray2 = [
              { xaxisData: byQuantityOrAmountData.xaxisData || [], yaxisData: this.initMoneyArr(byQuantityOrAmountData.yaxisData) || [] },
              { xaxisData: byCategoryData.xaxisData || [], yaxisData: this.initMoneyObj(byCategoryData.yaxisData) }
            ]
          } else {
            this.commonArray1 = [byDayData, byWeekData]
            this.commonArray2 = [byQuantityOrAmountData, byCategoryData]
          }

          // 首次需要初始化
          const { areaLineEcharts, lineEcharts } = this
          this.$nextTick(() => {
            areaLineEcharts(this.commonArray1[0], postIdBox1, optionTitle1)
            lineEcharts(this.commonArray2[0], 'num', postIdBox2, optionTitle2, subTitle)
            resolve()
          })
        })
      })
    },
    // 产品维度-初始化
    initProduct(
      actionUrl = productSoldStaticNumUrl,
      postIdBox1 = 'areaLineProduct1',
      postIdBox2 = 'areaLineUse1',
      optionTitle1 = '产品销量',
      optionTitle2 = '核销/退款量',
      subTitle = '单位：个',
      isMoney = false
    ) {
      const { getProductList, getProductStatic } = this
      this.isProductLoading = true
      Promise.all([getProductList(), getProductStatic(actionUrl, postIdBox1, postIdBox2, optionTitle1, optionTitle2, subTitle, isMoney)])
        .then(() => {})
        .finally(() => {
          this.isProductLoading = false
        })
        .catch((err) => {
          this.isProductLoading = false
          console.log(err)
        })
    },
    // 拿参数-主播维度 type 0 有分页 ，1 无分页
    getParamsHost(type = 0) {
      const { agentKeyword } = this.hostSearch
      const { pageIndex, pageSize } = type === 0 ? this.hostPagination : {}
      const { selectDate = [], getDay } = this
      return {
        pageIndex,
        pageSize,
        agentKeyword,
        startDate: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD') : getDay(-6) || '',
        endDate: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD') : getDay(0) || ''
      }
    },
    // 主播维度-list
    getHostList() {
      return new Promise((resolve, reject) => {
        this.isHostListLoading = true
        hostListUrl(this.getParamsHost(0)).then((res = {}) => {
          // 达人营发片数,核销流水,有效发片数,退款流水,派单主播数,带货流水
          const { agentPieceCount = 0, completeWater = 0, list = [], pieceCount = 0, refundWater = 0, sendAgentCount = 0, totalWater = 0, rowCount = 0, latestTime = '' } = res
          this.hostDataList = list
          this.hostPagination.total = rowCount
          this.latestModifyTime = latestTime
          this.hostDataStatic = [
            { name: '派单主播数', value: sendAgentCount, isMoney: false },
            { name: '有效发片数', value: pieceCount, isMoney: false },
            { name: '达人营发片数', value: agentPieceCount, isMoney: false },
            { name: '主播带货流水', value: totalWater, isMoney: true },
            { name: '带货核销流水', value: completeWater, isMoney: true },
            { name: '带货退款流水', value: refundWater, isMoney: true }
          ]
          this.isHostListLoading = false
          resolve()
        })
      })
    },
    // 主播维度-图表
    getHostStatic(
      actionUrl = hostActionNumStaticUrl,
      postIdBox1 = 'areaLineProduct4',
      postIdBox2 = 'areaLineUse4',
      optionTitle1 = '带货销量',
      optionTitle2 = '带货核销/退款量',
      subTitle = '单位：个',
      isMoney = false
    ) {
      return new Promise((resolve, reject) => {
        actionUrl(this.getParamsHost(1)).then((res = {}) => {
          const {
            byCategoryData = { xaxisData: [], yaxisData: [] }, // 按类别统计数据
            byDayData = { xaxisData: [], yaxisData: [] }, // 按天统计数据
            byQuantityOrAmountData = { xaxisData: [], yaxisData: [] }, // 按(数量/金额)统计数据
            byWeekData = { xaxisData: [], yaxisData: [] }, // 按周统计数据
            validVideoData = [] // 有效发片占比数据
          } = res
          if (isMoney) {
            this.commonArray1 = [
              { xaxisData: byDayData.xaxisData || [], yaxisData: this.initMoneyArr(byDayData.yaxisData) || [] },
              { xaxisData: byWeekData.xaxisData || [], yaxisData: this.initMoneyArr(byWeekData.yaxisData) || [] }
            ]
            this.commonArray2 = [
              { xaxisData: byQuantityOrAmountData.xaxisData || [], yaxisData: this.initMoneyArr(byQuantityOrAmountData.yaxisData) || [] },
              { xaxisData: byCategoryData.xaxisData || [], yaxisData: this.initMoneyObj(byCategoryData.yaxisData) }
            ]
          } else {
            this.commonArray1 = [byDayData, byWeekData]
            this.commonArray2 = [byQuantityOrAmountData, byCategoryData]
          }

          this.hostAcitonVideoArr = validVideoData
          // 首次需要初始化
          const { areaLineEcharts, lineEcharts, cicleEchartsHostActions } = this
          areaLineEcharts(this.commonArray1[0], postIdBox1, optionTitle1)
          lineEcharts(postIdBox1 === 'areaLineProduct6' ? this.commonArray2[1] : this.commonArray2[0], postIdBox1 === 'areaLineProduct6' ? 'bigClass' : 'num', postIdBox2, optionTitle2, subTitle)
          // lineEcharts(byQuantityOrAmountData, 'num', postIdBox2, optionTitle2)

          if (postIdBox2 === 'areaLineUse6') {
            this.$nextTick(() => {
              cicleEchartsHostActions(validVideoData)
            })
          }
          resolve()
        })
      })
    },
    // 主播维度-初始化
    initHost(
      actionUrl = hostActionNumStaticUrl,
      postIdBox1 = 'areaLineProduct4',
      postIdBox2 = 'areaLineUse4',
      optionTitle1 = '带货销量',
      optionTitle2 = '带货核销/退款量',
      subTitle = '单位：个',
      isMoney = false
    ) {
      const { getHostList, getHostStatic } = this
      this.isHostLoading = true
      Promise.all([getHostList(), getHostStatic(actionUrl, postIdBox1, postIdBox2, optionTitle1, optionTitle2, subTitle, isMoney)])
        .then(() => {})
        .finally(() => {
          this.isHostLoading = false
        })
        .catch((err) => {
          this.isHostLoading = false
          console.log(err)
        })
    },
    // 拿参数-商家维度 type 0 有分页 ，1 无分页
    getParamsShops(type = 0) {
      const { configId, locationId, merKeyword } = this.shopsSearch
      const { pageIndex, pageSize } = type === 0 ? this.shopsPagination : {}
      const { selectDate = [], getDay } = this
      return {
        pageIndex,
        pageSize,
        configId,
        locationId,
        merKeyword,
        startDate: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD') : getDay(-6) || '',
        endDate: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD') : getDay(0) || ''
      }
    },
    // 商家维度-list
    getShopsList() {
      return new Promise((resolve, reject) => {
        this.isShopsListLoading = true
        shopsSaleListUrl(this.getParamsShops(0)).then((res = {}) => {
          // 已探店商家数,有效发片商家数,上线商家数
          const { alreadyBusinessNumber = 0, effectiveBusinessNumber = 0, list = [], onlineBusinessNumber = 0, rowCount = 0, latestTime = '' } = res
          this.shopsDataList = list
          this.shopsPagination.total = rowCount
          this.latestModifyTime = latestTime
          this.shopsDataStatic = [
            { name: '上线商家数', value: onlineBusinessNumber, isMoney: false },
            { name: '有效发片商家数', value: effectiveBusinessNumber, isMoney: false },
            { name: '已探店商家数', value: alreadyBusinessNumber, isMoney: false }
          ]
          this.isShopsListLoading = false
          resolve()
        })
      })
    },
    // 商家维度-图表
    getShopsStatic(actionUrl = shopsStaticUrl, postIdBox1 = 'areaLineProduct7', postIdBox2 = 'areaLineUse7', optionTitle1 = '上线商家统计', optionTitle2 = '商家类型', subTitle = '单位：个') {
      return new Promise((resolve, reject) => {
        actionUrl(this.getParamsShops(1)).then((res = {}) => {
          const {
            byCategoryData = { xaxisData: [], yaxisData: [] }, // 按类别统计数据
            byDayData = { xaxisData: [], yaxisData: [] }, // 按天统计数据
            byQuantityOrAmountData = { xaxisData: [], yaxisData: [] }, // 按(数量/金额)统计数据
            byWeekData = { xaxisData: [], yaxisData: [] }, // 按周统计数据
            merchantData = [] // 商家占比统计数据
          } = res
          this.commonArray1 = [byDayData, byWeekData]
          this.commonArray2 = [byQuantityOrAmountData, byCategoryData]
          this.shopsMerchantArr = merchantData
          // 首次需要初始化
          const { areaLineEcharts, lineEcharts } = this
          areaLineEcharts(byDayData, postIdBox1, optionTitle1)
          lineEcharts(postIdBox2 === 'areaLineUse7' ? byCategoryData : byQuantityOrAmountData, postIdBox2 === 'areaLineUse7' ? 'bigClass' : 'num', postIdBox2, optionTitle2)
          // lineEcharts(byQuantityOrAmountData, 'num', postIdBox2, optionTitle2)
          resolve()
        })
      })
    },
    // 商家维度-初始化
    initShops(actionUrl = shopsStaticUrl, postIdBox1 = 'areaLineProduct7', postIdBox2 = 'areaLineUse7', optionTitle1 = '上线商家统计', optionTitle2 = '商家类型', subTitle = '单位：个') {
      const { getShopsList, getShopsStatic } = this
      this.isShopsLoading = true
      this.isActiveSwitchTime7 = true
      Promise.all([getShopsList(), getShopsStatic(actionUrl, postIdBox1, postIdBox2, optionTitle1, optionTitle2, subTitle)])
        .then(() => {})
        .finally(() => {
          this.isShopsLoading = false
        })
        .catch((err) => {
          this.isShopsLoading = false
          console.log(err)
        })
    },
    // 下拉搜索过滤
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 区域图
    areaLineEcharts(Objs = {}, idBox = 'areaLineProduct1', optionTitle = '产品销量') {
      const { xaxisData = [], yaxisData = [] } = Objs
      //	此dom为echarts图标展示dom
      let areaEchart = this.$echarts.init(document.getElementById(idBox))
      options.areaLineOption.xAxis[0].data = xaxisData || []
      options.areaLineOption.series[0].data = yaxisData || []
      options.areaLineOption.title.text = optionTitle
      areaEchart.clear()
      options.areaLineOption.series[0].label.show = false
      areaEchart.setOption(options.areaLineOption)
      if (xaxisData.length === 1) {
        areaEchart.clear()
        setTimeout(() => {
          options.areaLineOption.series[0].label.show = true
          areaEchart.setOption(options.areaLineOption)
          areaEchart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
          }) // 设置默认选中高亮部分
        }, 0)

        // areaEchart.on('mouseover', function(e) {
        //   console.log(e)
        //   areaEchart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        // })
        // areaEchart.on('mouseout', function(e) {
        //   console.log(e)
        //   index = e.dataIndex
        //   areaEchart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: 0
        //   })
        // })
      }
    },
    // 线图
    lineEcharts(Objs = {}, type = 'num', idBox = 'areaLineUse1', optionTitle = '核销/退款量', subTitle = '单位：个') {
      const { xaxisData = [], yaxisData = [] } = Objs
      let lineEchart = this.$echarts.init(document.getElementById(idBox))
      if (type === 'num') {
        options.lineOption.xAxis.data = xaxisData || []
        options.lineOption.series[0].data = yaxisData || []
        options.lineOption.title.text = optionTitle
        options.lineOption.title.subtext = subTitle
      } else if (type === 'bigClass') {
        if (xaxisData.length > 4) {
          this.bigWidth = true
        }
        options.lineOptionBigClass.xAxis.data = xaxisData || []
        let legendList = []
        let seriesList = []
        seriesList = yaxisData.map((item, index) => {
          if (legendList.indexOf(item.name) < 0) {
            legendList.push(item.name)
            return {
              name: item.name,
              type: 'bar',
              barWidth: 'auto',
              data: Array.from(item.value) || []
            }
          }
        })
        options.lineOptionBigClass.legend.data = legendList
        options.lineOptionBigClass.series = seriesList
        options.lineOptionBigClass.title.text = optionTitle
        options.lineOptionBigClass.title.subtext = subTitle
      }

      lineEchart.setOption(type === 'num' ? options.lineOption : options.lineOptionBigClass, true)
    },
    cicleEchartsHostCooper() {
      // 达人营主播等级占比
      let cicleEcharts1 = this.$echarts.init(document.getElementById('cicleEcharts1'))
      // 达人营主播合作频率
      let cicleEcharts2 = this.$echarts.init(document.getElementById('cicleEcharts2'))
      // 达人营发片主播占比
      let cicleEcharts3 = this.$echarts.init(document.getElementById('cicleEcharts3'))
      hostCooperStaticUrl(this.getParamsHost(1))
        .then((res = {}) => {
          // 主播等级统计数据 达人营主播合作统计数据  有效发片占比数据
          const { agentLevelData = [], agentCooperateData = [], agentPublishData = [] } = res
          options.cicleOptionHostLevel.series[0].data = agentLevelData
          options.cicleOptionHostCooper.series[0].data = agentCooperateData
          options.cicleOptionHostActions.series[0].data = agentPublishData
          cicleEcharts1.setOption(options.cicleOptionHostLevel)
          cicleEcharts2.setOption(options.cicleOptionHostCooper)
          cicleEcharts3.setOption(options.cicleOptionHostActions)
        })
        .finally(() => {
          this.isHostLoading = false
        })
    },
    cicleEchartsHostActions(getArr = []) {
      // 有效发片占比
      let cicleEcharts4 = this.$echarts.init(document.getElementById('cicleEcharts4'))
      options.cicleOptionValidActive.series[0].data = getArr
      cicleEcharts4.setOption(options.cicleOptionValidActive)
    },
    /*
      作用：切换
      参数：tabType 0=>时间 2=>类别
    */
    switchTypeAction(tabType = 0, type = 'day', isActive = false, postIdBox = '', indexType = 1, optionTitle = '', subTitle = '') {
      const { commonArray1 = [], commonArray2 = [] } = this
      if (tabType === 0) {
        if (type === 'day') {
          this.areaLineEcharts(commonArray1[0], postIdBox, optionTitle)
        } else if (type === 'week') {
          this.areaLineEcharts(commonArray1[1], postIdBox, optionTitle)
        }
        this['isActiveSwitchTime' + indexType] = isActive
        this.$forceUpdate()
      } else if (tabType === 1) {
        if (type === 'num') {
          this.lineEcharts(commonArray2[0], type, postIdBox, optionTitle, subTitle)
        } else if (type === 'bigClass') {
          this.lineEcharts(commonArray2[1], type, postIdBox, optionTitle, subTitle)
        }
        this['isActiveSwitchType' + indexType] = isActive
        this.$forceUpdate()
      }
    },
    enterCicle(title = '', num = 0) {
      this.cicleObj = {
        cicleTitle: title,
        cicleNum: num
      }
    },
    leaveCicle() {
      this.cicleObj = {}
    },
    detailProductAction(row = {}) {
      const { productId = '' } = row
      const { firstKey = '1' } = this
      this.$router.push({
        path: '/douJiaManage/boardProduct',
        query: {
          productId,
          firstKey,
          ...this.getParamsProduct(1)
        }
      })
    },
    detailHostAction(row = {}) {
      // 主播查详情就传主播、如果是视频就传视频id,stats==2是素人，1是主播
      const { stats = '', videoId = '', agentId = '' } = row
      const { selectDate = [], getDay, firstKey = '1' } = this
      this.$router.push({
        path: '/douJiaManage/boardHost',
        query: {
          flag: stats,
          firstKey,
          selectId: stats === '1' ? agentId : videoId,
          startDate: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD') : getDay(-6) || '',
          endDate: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD') : getDay(0) || ''
        }
      })
    },
    detailShopsAction(row = {}) {
      const { businessName = '', configId = '', productBizuserid = '' } = row
      const { firstKey = '1' } = this
      this.$router.push({
        path: '/douJiaManage/boardShops',
        query: {
          ...this.getParamsShops(1),
          configId,
          businessName,
          firstKey,
          productBizuserid
        }
      })
    },
    initMoneyArr(arr = []) {
      return Array.from(
        arr.map((item) => {
          return Number((item / 100).toFixed(2))
        })
      )
    },
    initMoneyObj(objArr = {}) {
      return objArr.map((item) => {
        return {
          name: item.name,
          value: this.initMoneyArr(item.value)
        }
      })
    },
    selectArea(value, option) {
      // const { data = {} } = option || {}
      this.getAreaLocation(value, '')
    },
    getAreaLocation(param1 = 0, param2 = '') {
      return new Promise((resolve, reject) => {
        locationArealUrl({ configId: param1, city: param2, admin: 1 })
          .then((res = []) => {
            this.allStation = res
            if (res.length === 0) {
              this.shopsSearch.locationId = ''
              this.productSearch.locationId = ''
              this.allStation = []
            }
            resolve()
          })
          .catch((err) => {
            reject(err)
          })
      })
    }
  },
  created() {
    const { timeIndex, typeIndex } = this
    timeIndex.forEach((item) => {
      this['isActiveSwitchTime' + item] = true
    })
    typeIndex.forEach((item) => {
      this['isActiveSwitchType' + item] = true
    })
  },
  mounted() {
    const { getAllAreaFun, initProduct, callback } = this
    const { startDate = '', endDate = '', firstKey = '1' } = this.$route.query || {}
    this.firstKey = firstKey
    // getAllAreaFun()
    this.setSelectDate([], startDate && endDate ? [startDate, endDate] : [])
    // // 获取所有站点
    areaAllListUrl()
      .then((res = []) => {
        console.log(firstKey)
        this.allArea = res
        callback(firstKey)
      })
      // 获取失败依然继续请求列表数据
      .catch((err) => {
        console.log(err)
        callback(firstKey)
      })
  },

  filters: {}
}
</script>

<style lang="less" scoped>
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  font-size: 16px;
  font-weight: bold;
  color: #1d6fe9;
}
/deep/ .ant-tabs-ink-bar {
  width: 32px !important;
  height: 3px;
  background: #1d6fe9;
  left: 14px;
}
/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  margin-right: 0;
  border: none;
  border-right: 1px solid #f0f0f0;
  border-radius: 0;
  border-top: 1px solid #f0f0f0;
}
/deep/ .new-statist-box .ant-tabs-bar {
  border-color: #f0f0f0;
  margin-bottom: 0;
}
/deep/ .new-statist-box .ant-tabs-tabpane,
.no-tabs {
  background: #ffffff;
  padding: 20px 20px 5px 20px;
  overflow-x: scroll;
  width: 100%;
}
/deep/ .ant-tabs-nav .ant-tabs-tab:hover {
  color: #1d6fe9;
}
//滚动条整体部分
// /deep/ .new-statist-box .ant-tabs-tabpane::-webkit-scrollbar,
// .no-tabs::-webkit-scrollbar {
//   width: 2px;
//   height: 8px;
//   background-color: #ebebeb;
//   border-radius: 10px;
// }
//scroll轨道背景
// /deep/ .new-statist-box .ant-tabs-tabpane::-webkit-scrollbar-track,
// .no-tabs::-webkit-scrollbar-track {
//   background-color: transparent;
//   border-radius: 10px;
// }
/deep/ .new-statist-box .ant-statistic {
  margin-right: 0 !important;
}
p {
  margin-bottom: 0;
}
.update-time-box {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  .quick-btn {
    margin-left: 20px;
  }
  .ant-btn:focus,
  .ant-btn:hover {
    color: #fff;
    background-color: #1d6fe9;
    border-color: #1d6fe9;
  }

  .data-text {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-left: 12px;
  }
  .data-title {
    margin-left: 6px;
    // position: relative;
    // top: 2px;
  }
  &-text1 {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    align-items: center;
  }
  &-text2 {
    font-size: 10px;
    font-weight: 400;
    color: #999999;
  }
}
.second-tabs {
  margin-top: 12px;
  margin-bottom: 10px;
  width: 100%;
  .line-echarts-box,
  .cicle-echarts {
    min-width: 548px;
    flex: 1;
    height: 328px;
    background: #fcfcfc;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    padding: 20px 10px 18px 15px;
    margin-right: 20px;
    position: relative;
    .line-echarts {
      width: 100%;
      height: 100%;
    }
    .switch-time {
      position: absolute;
      top: 20px;
      right: 30px;
      background: #f5f5f5;
      border-radius: 8px;
      > div {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        // background: #f5f5f5;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
      .active-time {
        background: #1d6fe9;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
  .big-width {
    width: 748px;
  }
  .line-echarts-box:last-child {
    margin-right: 0;
  }
  .cicle-echarts {
    width: 349px;
    height: 328px;
    min-width: 349px;
  }
  .shop-merchants {
    &-title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 16px;
    }
    &-cicle {
      height: 240px;
      position: relative;
      .cicle-remind-text {
        position: absolute;
        top: 8px;
        left: calc(50% - 160px);
        p {
          margin-bottom: 0;
          text-align: center;
        }
        .type-text {
          font-size: 13px;
          font-weight: bold;
          padding-bottom: 6px;
          border-bottom: 2px solid #f7f7f7;
          color: #333333;
          position: relative;
          padding: 0 3px 5px 4px;
        }
        .type-text::after {
          content: '';
          position: absolute;
          bottom: -4px;
          right: -7px;
          width: 8px;
          height: 2px;
          background: #f7f7f7;
          transform: rotateZ(30deg);
        }
        .type-num {
          padding-top: 6px;
          font-size: 10px;
          font-weight: 600;
          color: #999999;
        }
      }
      .cicle-big {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: #4c84ff;
        position: relative;
        margin: auto;
        cursor: pointer;
        z-index: 1;
      }
      .cicle-middle {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #ff9f71;
        position: absolute;
        left: calc(50% - 70px);
        bottom: 70px;
        cursor: pointer;
        z-index: 2;
      }
      .cicle-small {
        width: 102px;
        height: 102px;
        border-radius: 50%;
        background: #ffeac6;
        position: absolute;
        left: calc(50% - 51px);
        bottom: 70px;
        cursor: pointer;
        z-index: 3;
      }
      .cicle-reminds {
        position: absolute;
        width: 100%;
        max-width: 350px;
        bottom: 0;
        left: calc(50% - 175px);
        justify-content: space-around;
        &-item {
          font-size: 12px;
          font-weight: 400;
          color: #666666;

          .dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 4px;
            position: relative;
            top: -1px;
          }
          .dot1 {
            background: #4c84ff;
          }
          .dot2 {
            background: #ff9f71;
          }
          .dot3 {
            background: #f1cd90;
          }
        }
      }
    }
  }
}
.board-table-box {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  padding: 16px 12px;
  height: 542px;
  position: relative;
  // overflow-x: scroll;
  .table-box-title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    margin-bottom: 15px;
  }
}
</style>
